<template>
  <view>
    <view class="box" :key="index1" v-for="(job, index1) in list">
      <view @click="goDetail(job)" class="mylis">
				<view class="top">
					<view class="tit">
						{{ job.title }}
					</view>

					<view class="month">工价：{{ job.wages }} </view>
				</view>
				<view class="bot">
					<view class="tags" v-if="job.monthly_salary_min !==null && job.monthly_salary_max !==null">
						{{ job.monthly_salary_min }}~{{ job.monthly_salary_max }}元/月
					</view>
					<view class="tags" v-else>
						薪资面议
					</view>
					<view class="hours">
						<!-- <view class="day">  </view> -->
						<view class="moneys">补贴:{{ job.subsidy}}元</view>
					</view>
				</view>
				<view  v-if="job.labels" class="tags">
					<u-tag :key="index" v-for="(item, index) in job.labels.split(',')" class="li" :text="item" plain size="mini"
						type="primary"></u-tag>
				</view>
        <view class="times">
          <view>添加时间：{{ job.apply_time }}</view>
          <view class="status">{{ job.state }}</view>
        </view>
        
				<view class="company">
					<view class="company-left">
						<img :src="job.logo_url" />
						{{ job.name || ''}}
					</view>
					<view v-if="job.province || job.city || job.district" class="company-right">
						<u-icon name="map-fill" color="#ccc" size="28"></u-icon>
						{{ job.province || ''}}{{ job.city || ''}}{{ job.district || ''}}
					</view>
				</view>
			</view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["list"],
  data() {
    return {
      
    };
  },

  methods: {
     goDetail(item) {

      if (item.simple == 0) {
        uni.navigateTo({
          url: "/package/pages/searchJob/list/simpledetail?jobId=" + item.id,
        });
      } else {
        uni.navigateTo({
          url: "/package/pages/searchJob/list/detail?jobId=" + item.id,
        });
      }
    },
  },
};
</script>

<style>
	page {
		background: #f5f7f9;
	}
</style>
<style scoped lang="scss">
.box{
  margin-top: 8px;
}
  .times{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    .status{
       color: #fff;
        font-size: 10px;
        min-width: 100rpx;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
         background: rgb(223, 92, 92);
    }
  }

	.company {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 22rpx;
		margin: 8px 0 0;
		color: #999999;

		&-left {
			display: flex;
			align-items: center;
			font-family: PingFang SC;
			font-weight: bold;

			img {
				width: 25px;
				height: 25px;
				border-radius: 50%;
				margin: 0 5px 0 0;
			}
		}

		&-right {
			text-align: right;
			display: flex;
			align-items: center;
		}
	}

	.tags {
		margin: 5px 0 8px;

		.li {
			margin-right: 12px;
		}
	}

	.detail {
		position: relative;
	}

	.indicatorBox {
		position: absolute;
		bottom: 30px;
		border-radius: 5px;
		background: rgba(235, 96, 59, 0.2);
		display: flex;
		align-items: center;
		left: 20%;
		right: 20%;
		overflow: hidden;

		.lis {
			text-align: center;
			flex: 1;
			line-height: 26px;
			font-size: 12px;
			color: #fff;
			border-color: rgba(255, 255, 255, 0.3);
			border-left: 1px solid rgba(255, 255, 255, 0.3);
		}

		.active {
			background-color: $my-primary;
		}
	}

	.mylis {
		background: #ffffff;
		padding: 20rpx 20rpx 28rpx;
    margin: 0 20rpx 20rpx;
		// border-bottom: 1px solid #f7f8fa;
    background: #fff;

	

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 15rpx;

			.month {
				text-align: right;
				font-size: 13px;
				color: #999;
				flex: 1;
			}

			.tit {
				flex: 2;
				// line-height: 42rpx;
				// height: 84rpx;
				font-size: 14px;
				font-weight: bold;
				color: #333333;
				// text-overflow: -o-ellipsis-lastline;
				// overflow: hidden;
				// text-overflow: ellipsis;
				// display: -webkit-box;
				// -webkit-line-clamp: 1;
				// line-clamp: 1;
				// -webkit-box-orient: vertical;
			}
		}

		.bot {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.hours {
				display: flex;
				align-items: center;

				.day {
					text-align: center;
					width: 80rpx;
					font-size: 12px;
					border-radius: 0 10px 0 10px;
					color: #fff;
					// padding: 0 12px;
					line-height: 22px;
					background: -webkit-linear-gradient(90deg, $my-primary, $my-jb);
					/* Safari 5.1 - 6.0 */
					background: -o-linear-gradient(90deg, $my-primary, $my-jb);
					/* Opera 11.1 - 12.0 */
					background: -moz-linear-gradient(90deg, $my-primary, $my-jb);
					/* Firefox 3.6 - 15 */
					background: linear-gradient(90deg, $my-primary, $my-jb);
				}

				.moneys {
					color: $my-primary;
					font-size: 13px;
					margin-left: 10rpx;
				}
			}

			.tags {
				font-size: 14px;
				color: #fb6464;
			}
		}
	}
</style>
